<template>
    <van-empty class="product-list-empty" image="search" description="没有找到相关的产品" v-if="emptyProducts && loaded"/>
    <van-list class="product-list"
              v-model="loading" :finished="finished" finished-text="没有更多了"
              @load="load" v-else>
        <div class="product-list-content">
            <product-list-item v-for="product in products" :key="product.id" :product="product"/>
        </div>
    </van-list>
</template>

<script>
  import * as _ from "lodash"
  import ProductListItem from "@/components/product/ProductListItem"
  import { Col, Empty, List, Row } from "vant"
  import { catalog } from "@mall/api-services"

  export default {
    name: "ProductList",
    components: {
      ProductListItem,
      [Col.name]: Col,
      [Empty.name]: Empty,
      [List.name]: List,
      [Row.name]: Row,
    },
    props: {
      name: String,
      storeId: String,
      collections: [String, Array],
      sort: String,
      inventoryStatuses: [String, Array],
    },
    watch: {
      name() {
        this.refreshProducts()
      },
      collections() {
        this.refreshProducts()
      },
      inventoryStatuses() {
        this.refreshProducts()
      },
      sort() {
        this.refreshProducts()
      },
    },
    computed: {
      loaded() {
        return !this.loading
      },
      emptyProducts() {
        const { products } = this
        return _.isEmpty(products)
      },
    },
    data() {
      return {
        loading: false,
        finished: false,
        page: 1,
        nextPage: 1,
        limit: 20,
        totalPages: 1,
        products: [],
      }
    },
    created() {
      this.refreshProducts()
    },
    methods: {

      refreshProducts() {
        this.products = []
        this.page = 1
        this.nextPage = 1
        this.totalPages = 1
        this.finished = false
        this.load()
      },
      load() {
        const { storeId, collections, sort, name, inventoryStatuses, nextPage, limit } = this
        this.loading = true
        catalog.ProductServiceV1
          .getProducts()
          .page(nextPage).limit(limit)
          .storeId(storeId)
          .name(name)
          .statuses(catalog.ProductStatus.Active)
          .inventoryStatuses(inventoryStatuses)
          .collections(collections)
          .sort(sort)
          .list()
          .then(pageProducts => {
            this.page = pageProducts.page
            this.nextPage = this.nextPage + 1
            this.totalPages = pageProducts.totalPages
            this.finished = this.page === this.totalPages
            this.products.push(...pageProducts.elements)
          })
          .finally(() => {
            this.loading = false
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
    .product-list {
        .product-list-content {
            padding: 4px;
            display: flex;
            flex-wrap: wrap;
        }

        .product-list-empty {
            margin: 100px auto 0 auto;
        }
    }

</style>
